<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

    <style>
      #btn {
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div id="view" style="width: 1000px; height: 600px;"></div>
    <button id="btn">刷新</button>

    <script src="./echarts/echarts.js"></script>
    <script>
      //输入与之匹配的请求 URL地址进行拦截
      //提供相应的模板进行数据的返回
      Mock.mock("/api/echarts/list", "get", function () {
        return Mock.mock({
          "user|5-10": [
            {
              id: "@integer",
              name: "@cname()",
            },
          ],
        });
      });
    </script>
    <script>
      var myChart = echarts.init(document.getElementById("view"));
      var setT; // 定时器

      $("#btn").click(() => {
        if (setT) {
          console.log("清除定时器---");
          clearInterval(setT);
        }
        setT = setInterval(function () {
          getEcharts(); // 发送请求
          console.log("定时器开启");
        }, 2000);
      });

      // 发送请求
      function getEcharts() {
        $.ajax({
          get: "get",
          url: "/api/echarts/list",
          dataType: "json",
          success: function (data) {
            var xData = [];
            var yData = [];
            data.user.map(function (v) {
              xData.push(v.name);
              yData.push(v.id);
            });
            console.log(xData, yData);
            setOpt(xData, yData); // 赋值
          },
        });
      }

      var colorArray = [
        {
          top: "#ffa800", //黄
          bottom: "rgba(248,195,248,.3)",
        },
        {
          top: "#1ace4a", //绿
          bottom: "rgba(100,255,249, 0.3)",
        },
        {
          top: "#4bf3ff", //蓝
          bottom: "rgba(135,183,255,.3)",
        },
        {
          top: "#4f9aff", //深蓝
          bottom: "rgba(11,42,84,.3)",
        },
        {
          top: "#b250ff", //粉
          bottom: "rgba(100,255,249,.3)",
        },
      ];

      // 渲染 echarts
      function setOpt(xData, yData) {
        myChart.setOption({
          backgroundColor: "#38445E",
          tooltip: {
            show: true,
            formatter: "{b} : {c}",
          },
          xAxis: {
            type: "value",
            show: false,
          },
          yAxis: {
            type: "category",
            axisTick: {
              show: false,
              alignWithLabel: false,
              length: 5,
            },
            inverse: "true",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            data: xData,
          },
          series: [
            {
              type: "bar",
              label: {
                normal: {
                  show: true,
                  position: "right",
                  formatter: "{c}",
                },
              },
              data: yData,
              barWidth: "40px",
              barCategoryGap: "50%",
              itemStyle: {
                normal: {
                  show: true,
                  color: function (params) {
                    let num = colorArray.length;
                    return {
                      type: "linear",
                      colorStops: [
                        {
                          offset: 0,
                          color: colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: colorArray[params.dataIndex % num].top,
                        },
                        {
                          offset: 0,
                          color: colorArray[params.dataIndex % num].bottom,
                        },
                        {
                          offset: 1,
                          color: colorArray[params.dataIndex % num].top,
                        },
                      ],
                    };
                  },
                  barBorderRadius: 20,
                  borderWidth: 0,
                  borderColor: "#333",
                },
              },
            },
          ],
        });
      }
      getEcharts();
    </script>
  </body>
</html>
